<template>
  <div class="ge">
    <!-- 2.向变量一样进行使用 -->
    <dl class="left">
      <dt><img :src="imgurl" /></dt>
      <dd>
        <p class="one">{{ singname | subb }}</p>
        <p class="mar">
          <span class="bod">SQ</span><span class="clr"> 超81%人播放</span>
          {{ name | sub }}
        </p>
      </dd>
    </dl>
    <div class="right">
      <i class="iconfont icon-bofang02 bofang" @click="bofang()"></i>
      <i class="iconfont icon-gengduo-shuxiang bofang"></i>
    </div>
    <!-- <audio :src="singul"></audio> -->
  </div>
</template>

<script>
export default {
  //1 正向传值   定义了接受参数
  props: ["imgurl", "singname", "name", "singul"],
  //局部过滤器
  filters: {
    //name
    sub(val) {
      return val.substr(0, 14);
    },
    //singname
    subb(val) {
      return val.substr(0, 8);
    },
  },
  methods: {
    bofang() {},
  },
};
</script>

<style scoped>
dd {
  margin-left: 0.1rem;
}
.clr {
  color: rgb(243, 210, 32);
}
.bod {
  border: 1px red solid;
  border-radius: 0.1rem;
}
.one {
  font-size: 0.3rem;
  /* margin-left: 0.2rem; */
  margin-top: 0.1rem;
  width: 2.5rem;
}
.mar {
  color: rgb(162, 162, 162);
}
.bofang {
  font-size: 0.58rem;
  color: rgb(179, 179, 179);
}
.left {
  display: flex;
  width: 80%;
}
.right {
  width: 20%;
  line-height: 1.08rem;
}
.ge {
  width: 98%;
  height: 1.08rem;
  margin-bottom: 0.52rem;
  display: flex;
  justify-content: space-around;
  margin-left: 2%;
}
img {
  width: 1.04rem;
  height: 1.08rem;
}
</style>